<template>
  <view class="cap-detail-modal">
    <up-popup v-model:show="show" overlay mode="bottom" touchable maxHeight="'80%'" closeable closeOnClickOverlay
      @close="close" @open="open">
      <view class="modal-content">
        <view class="modal-header">
          <view class="modal-title">封顶详情</view>
        </view>
        
        <view class="detail-list">
          <view class="list-item" v-for="(item, index) in detailList" :key="index">
            <view class="item-header">
              <text class="order-no">订单号：{{ item.orderNo }}</text>
            </view>
            <view class="item-content">
              <view class="info-row">
                <text class="label">车牌号：</text>
                <text class="value">{{ item.plateNumber }}</text>
              </view>
              <view class="info-row">
                <text class="label">订单应付金额：</text>
                <text class="value amount">¥{{ item.payableAmount }}</text>
              </view>
              <view class="info-row">
                <text class="label">驶入时间：</text>
                <text class="value">{{ item.entryTime }}</text>
              </view>
              <view class="info-row">
                <text class="label">驶出时间：</text>
                <text class="value">{{ item.exitTime }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

defineOptions({ name: "CapDetailModal" });

// 创建响应式数据  
const show = defineModel<boolean>("show", { default: false });
const detailList = defineModel<any[]>("detailList", { default: () => [] });

// 定义方法  
function open() {
  show.value = true;
}

function close() {
  show.value = false;
}
</script>

<style scoped lang="scss">
.cap-detail-modal {
  .modal-header {
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    padding: 20rpx;
    border-bottom: 1px solid #f0f0f0;
  }

  .modal-content {
    max-height: 80vh;
    overflow-y: auto;
  }

  .detail-list {
    padding: 20rpx;
  }

  .list-item {
    background: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

    .item-header {
      margin-bottom: 16rpx;
      
      .order-no {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
      }
    }

    .item-content {
      .info-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12rpx;
        
        &:last-child {
          margin-bottom: 0;
        }

        .label {
          font-size: 26rpx;
          color: #666;
          flex-shrink: 0;
        }

        .value {
          font-size: 26rpx;
          color: #333;
          text-align: right;
          
          &.amount {
            color: #ff6b35;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>